<template>
  <el-dialog :model-value="dialogVisible" :before-close="handleClose" width="500px" title="人员详情">
    <div class="empInfo">
      <div class="empInfo__header">
        <el-image class="empAvatar" :src="cardInfo.avatar"></el-image>
        <div class="empInfo__header__con">
          <div class="empName">
            {{ cardInfo.empname }}
            <el-icon class="empSex" size="20" color="blue" v-if="cardInfo.sex === '男'"><Male /></el-icon>
            <el-icon class="empSex" size="20" color="red" v-if="cardInfo.sex === '女'"><Female /></el-icon>
          </div>
          <div class="empCode">编号：{{ cardInfo.empcode }}</div>
        </div>
      </div>
      <el-form label-width="120px" class="empInfo__con">
        <el-form-item class="empInfo__item" label="部门：">{{ cardInfo!.cardType || "—" }}</el-form-item>
        <el-form-item class="empInfo__item" label="职  位：">{{ cardInfo!.job || "—" }}</el-form-item>
        <!-- <el-form-item class="empInfo__item" label="电话[手机]：">{{ cardInfo!.phone || "—" }}</el-form-item> -->
        <!-- <el-form-item class="empInfo__item" label="证件号码：">{{ cardInfo!.cyd || "—" }}</el-form-item> -->
        <el-form-item class="empInfo__item" label="民  族：">{{ cardInfo!.nation || "—" }}</el-form-item>
        <el-form-item class="empInfo__item" label="籍  贯：">{{ cardInfo!.placeOfBirth || "—" }}</el-form-item>
        <el-form-item class="empInfo__item" label="文化程度：">{{ cardInfo!.highestDegree || "—" }}</el-form-item>
        <el-form-item class="empInfo__item" label="政治面貌：">{{ cardInfo!.politicalStatus || "—" }}</el-form-item>
        <el-form-item class="empInfo__item" label="工作证号：">{{ cardInfo!.workCardNumber || "—" }}</el-form-item>
        <!-- <el-form-item class="empInfo__item" label="EMail：">{{ cardInfo!.email || "—" }}</el-form-item> -->
        <!-- <el-form-item class="empInfo__item" label="办公电话：">{{ cardInfo!.uphone || "—" }}</el-form-item> -->
        <!-- <el-form-item class="empInfo__item" label="办公地址：">{{ cardInfo!.officeAddress || "—" }}</el-form-item>
        <el-form-item class="empInfo__item" label="户口所在地：">{{ cardInfo!.hukouAddress || "—" }}</el-form-item>
        <el-form-item class="empInfo__item" label="家庭地址：">{{ cardInfo!.homeaddress || "—" }}</el-form-item> -->
        <el-form-item class="empInfo__item" label="卡号：">{{ cardInfo!.cardNo || "—" }}</el-form-item>
        <!-- <el-form-item class="empInfo__item" label="出生日期：">{{ cardInfo!.birthday || "—" }}</el-form-item> -->
        <el-form-item class="empInfo__item" label="卡有效期：">{{ cardInfo!.cardvalid || "—" }}</el-form-item>
        <el-form-item class="empInfo__item" label="门禁有效期：">{{ cardInfo!.rulevalid || "—" }}</el-form-item>
      </el-form>
      <el-form-item class="empInfo__item" label="备  注：" label-width="120px">{{ cardInfo!.comment || "—" }}</el-form-item>
    </div>
  </el-dialog>
</template>

<script setup lang="ts" name="EmployeeInfo">
defineProps<{
  dialogVisible: boolean;
  cardInfo: {
    [key: string]: any;
    cardType: string;
    job: string;
    phone: string;
    cyd: string;
    nation: string;
    placeOfBirth: string;
    highestDegree: string;
    politicalStatus: string;
    workCardNumber: string;
    email: string;
    uphone: string;
    officeAddress: string;
    hukouAddress: string;
    homeaddress: string;
    cardNo: string;
    birthday: string;
    cardvalid: string;
    rulevalid: string;
    comment: string;
  };
  handleClose: () => void;
}>();
</script>
<style lang="scss" scoped>
.empInfo {
  display: flex;
  flex-flow: column;
  padding: 0 20px;
  .empInfo__header {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 20px;
    border-bottom: 1px solid #eeeeee;
    .empAvatar {
      width: 90px;
      height: 90px;
      margin-right: 20px;
      margin-bottom: 18px;
      background: #eeeeee;
      border: 1px solid #eeeeee;
      border-radius: 50%;
    }
    .empName {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      font-size: 18px;
    }
    .empSex {
      margin-left: 5px;
    }
    .empCode {
      font-size: 16px;
      color: #666666;
    }
  }
  .empInfo__con {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20px 0 0;
    .empInfo__item {
      width: 50%;
      font-size: 16px;
    }
  }
}
</style>
